<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<jsp:include page="../framework/header.jsp" />
<div id="container"
	class="effect aside-float aside-bright mainnav-lg navbar-fixed mainnav-fixed aside-fixed">

	<jsp:include page="../framework/topper.jsp" />
	<div class="boxed">
		<!--=======================  页面主体内容  ============================-->
		<div id="content-container">
			<div class="wrapper">
				<!--=========================  页面标题  ==========================-->
				<div id="page-title">
						<p class="page-header text-overflow table-header">
							按钮&nbsp;&nbsp;<small>说明文字</small>
						</p>
					</div>
					<ol class="breadcrumb">
						<li><a href="#">UI样式</a></li>
						<li class="active">按钮</li>
					</ol>
					<div id="page-content">
						<div class="col-sm-6">
							<div class="panel">
								<div class="panel-heading">
									<div class ="panel-title">颜色按钮</div>
								</div>
								<div class="panel-body">
									<div class = "row">
										<div class = "col-sm-3 text-center">
											<a class="btn btn-default">默认</a>
										</div>
										<div class="col-sm-3 text-center">
											<a class="btn btn-default">
												<i class="fa fa-rotate-left"></i> 默认
											</a>
										</div>
										<div class="col-sm-3 text-center">
											<a class="btn btn-default active">
												<i class="fa fa-rotate-left"></i> 默认
											</a>
										</div>
										<div class="col-sm-3 text-center">
											<a class="btn btn-default disabled">
												<i class="fa fa-rotate-left"></i> 默认
											</a>
										</div>
									</div>
									<br>
									<div class = "row">
										<div class = "col-sm-3 text-center">
											<a class="btn btn-primary"> 主要
											</a>
										</div>
										<div class = "col-sm-3 text-center">
											<a class="btn btn-primary">
												<i class="fa fa-plus"></i> 主要
											</a>
										</div>	
										<div class = "col-sm-3 text-center">
											<a class="btn btn-primary active">
												<i class="fa fa-plus" style=""></i> 主要
											</a>
										</div>
										<div class="col-sm-3 text-center">
											<a class="btn btn-primary disabled">
												<i class="fa fa-rotate-left"></i> 主要
											</a>
										</div>
									</div>
									<br>
									<div class = "row">
										<div class = "col-sm-3 text-center">
											<a class="btn btn-success"> 成功
											</a>
										</div>
										<div class = "col-sm-3 text-center">
											<a class="btn btn-success">
												<i class="fa fa-plus"></i> 成功
											</a>
										</div>	
										<div class = "col-sm-3 text-center">
											<a class="btn btn-success active">
												<i class="fa fa-plus" style=""></i> 成功
											</a>
										</div>
										<div class="col-sm-3 text-center">
											<a class="btn btn-success disabled">
												<i class="fa fa-rotate-left"></i> 成功
											</a>
										</div>
									</div>
									<br>
									<div class = "row">
										<div class = "col-sm-3 text-center">
											<a class="btn btn-warning"> 警示
											</a>
										</div>
										<div class = "col-sm-3 text-center">
											<a class="btn btn-warning">
												<i class="fa fa-plus"></i> 警示
											</a>
										</div>	
										<div class = "col-sm-3 text-center">
											<a class="btn btn-warning active">
												<i class="fa fa-plus"></i> 警示
											</a>
										</div>
										<div class="col-sm-3 text-center">
											<a class="btn btn-warning disabled">
												<i class="fa fa-rotate-left"></i> 警示
											</a>
										</div>
									</div>
									<br>
									<div class = "row">
										<div class = "col-sm-3 text-center">
											<a class="btn btn-danger"> 危险
											</a>
										</div>
										<div class = "col-sm-3 text-center">
											<a class="btn btn-danger">
												<i class="fa fa-plus"></i> 危险
											</a>
										</div>	
										<div class = "col-sm-3 text-center">
											<a class="btn btn-danger active">
												<i class="fa fa-plus" style=""></i> 危险
											</a>
										</div>
										<div class="col-sm-3 text-center">
											<a class="btn btn-danger disabled">
												<i class="fa fa-rotate-left"></i> 危险
											</a>
										</div>
									</div>
									<br>
									<div class = "row">
										<div class = "col-sm-3 text-center">
											<a class="btn btn-default btn-short">选择文件
											</a>
										</div>
										<div class = "col-sm-3 text-center">
											<a class="btn btn-default btn-short">
												<i class="fa fa-plus"></i> 选择文件
											</a>
										</div>	
										<div class = "col-sm-3 text-center">
											<a class="btn btn-default  btn-short active">
												<i class="fa fa-plus" style=""></i> 选择文件
											</a>
										</div>
										<div class="col-sm-3 text-center">
											<a class="btn btn-default btn-short disabled">
												<i class="fa fa-rotate-left"></i> 选择文件
											</a>
										</div>
									</div>
									<br>
									<div class = "row">
										<div class = "col-sm-3 text-center">
											<a class="btn btn-primary btn-short">选择文件
											</a>
										</div>
										<div class = "col-sm-3 text-center">
											<a class="btn btn-primary btn-short">
												<i class="fa fa-plus"></i> 选择文件
											</a>
										</div>	
										<div class = "col-sm-3 text-center">
											<a class="btn btn-primary btn-short active">
												<i class="fa fa-plus" style=""></i> 选择文件
											</a>
										</div>
										<div class="col-sm-3 text-center">
											<a class="btn btn-primary btn-short disabled">
												<i class="fa fa-rotate-left"></i> 选择文件
											</a>
										</div>
									</div>
									<br>
									<div class = "row">
										<div class = "col-sm-3 text-center">
											<a class="btn btn-danger btn-short">禁用文件
											</a>
										</div>
										<div class = "col-sm-3 text-center">
											<a class="btn btn-danger btn-short">
												<i class="fa fa-plus"></i> 禁用文件
											</a>
										</div>	
										<div class = "col-sm-3 text-center">
											<a class="btn btn-danger btn-short active">
												<i class="fa fa-plus"></i> 禁用文件
											</a>
										</div>
										<div class="col-sm-3 text-center">
											<a class="btn btn-danger btn-short disabled">
												<i class="fa fa-rotate-left"></i> 禁用文件
											</a>
										</div>
									</div>
									<br>
									 <div class="row" >
	                                	<div class= "col-sm-12 text-center">
											 <a class="btn btn-primary btn-ensure">确定</a>
											 <a class="btn btn-default btn-cancel">取消</a>
										 </div>
									</div>
									<br>
									<div class="row" >
	                                	<div class= "col-sm-12 text-center">
											 <a class="btn btn-primary btn-anti">我知道了</a>
										 </div>
									</div>
									<br>
									
								</div>
							</div>
						</div>
						<div class="col-sm-6">
							<div class="panel" >
								<div class="panel-heading ">
									<div class ="panel-title">图表按钮(一)</div>
								</div>
								
								
								<div class="panel-body">
									<div class = "row">
										<div class = "col-sm-3 text-center">
											<a class="btn btn-icon btn-hover-primary" >
												<i class="fa fa-search"></i>
											</a>
										</div>
										<div class = "col-sm-3 text-center">
											<a class="btn btn-icon  btn-hover-primary">
												<i class="glyphicon glyphicon-th-list icon-th"></i>
											</a>
										</div>
										<div class = "col-sm-3 text-center">
											<a class="btn btn-icon  btn-hover-primary">
												<i class="glyphicon glyphicon-refresh icon-refresh"></i>
											</a>
										</div>
										<div class = "col-sm-3 text-center">
											<a class="btn btn-icon  btn-hover-primary">
												<i class="glyphicon glyphicon-th-large icon-list-alt"></i>
											</a>
										</div>
									</div>
									<br>
									<div class = "row">
										<div class = "col-sm-3 text-center">
											<a class="btn btn-icon btn-hover-primary">
												<i class="fa fa-gear"></i>
											</a>
										</div>
										<div class = "col-sm-3 text-center">
											<a class="btn btn-icon btn-hover-success">
												<i class="fa fa-plus"></i>
											</a>
										</div>
										<div class = "col-sm-3 text-center">
											<a class="btn btn-icon btn-hover-danger">
												<i class="fa fa-remove"></i>
											</a>
										</div>
										<div class = "col-sm-3 text-center">
											<a class="btn btn-icon btn-hover-warning">
												<i class="fa fa-question-circle"></i>
											</a>
										</div>
									</div>
									<br>
									</div>
								</div>
								<div class="panel">
									<div class="panel-heading ">
										<div class ="panel-title">图表按钮（二）</div>
									</div>
									<div class="panel-body">
										<div class = "row">
											<div class="col-sm-4 text-center">
												<label style="line-height: 14px;">开关</label>
											</div>
											<div class="col-sm-8 pull-left">
											<p>
												<input id="checkbox_close" type="checkbox" class="toggle-switch" autocomplete="off">
												<label for="checkbox_close" class="switch-large"></label>
											</p>
											</div>
										</div>
										<br>
										<div class = "row">
											<div class="col-sm-4 text-center">
												<label style="line-height: 14px;margin-top: 25px;">分页符</label>
											</div>
											<div class ="col-sm-8 pull-left">
													<ul class="pagination">
														<li class="page-pre">
														<a href="#">‹</a>
														</li>
														<li class="page-number active">
														<a href="#">1</a>
														</li>
														<li class="page-number">
														<a href="#">2</a>
														</li>
														<li class="page-number">
														<a href="#">3</a>
														</li>
														<li class="page-number">
														<a href="#">4</a>
														</li>
														<li class="page-next">
														<a href="#">›</a>
														</li>
													</ul>
											</div>
										</div>
										<div class="row">
											<div class="col-sm-4 text-center">
												<label style="line-height: 14px;">提示符</label>
											</div>
											<div class="col-sm-8 pull-left">
												<span class="badge badge-success badge-md">正常</span>
												<span class="badge badge-info badge-md">进行中 <dot>...</dot></span>
												<span class="badge badge-danger badge-md">异常</span>
												<span class="badge badge-warning badge-md">警告</span>
												<span class="badge badge-default badge-md">其他</span>
												<span class="badge badge-danger badge-md">内存：100%</span>
											</div>
										</div>
										<div class="row">
											<div class="col-sm-4 text-center">
												<label style="line-height: 14px;">点状提示符</label>
											</div>
											<div class="col-sm-8 pull-left">
												<label class="fa fa-circle tip-circle text-success"> <font color="#999999">正常</font></label>
												<br>
												<label class="fa fa-circle tip-circle text-warning"> <font color="#999999">警示</font></label>
												<br>
												<label class="fa fa-circle tip-circle text-danger"> <font color="#999999">异常</font></label>
												<br>
												<label class="fa fa-circle tip-circle text-grey"> <font color="#999999">禁止状态</font></label>
											</div>
										</div>
										
									</div>
								</div>
							</div>
						</div>
			</div>
		</div>

		<!--=========================  过程可视化消息栏  ==========================-->
		<jsp:include page="../framework/aside.jsp" />

		<!--=========================  左侧菜单  ==========================-->
		<jsp:include page="../framework/lefter.jsp" />

	</div>

	<!--=========================  页面底部版权信息  ==========================-->
	<jsp:include page="../framework/footer.jsp" />

	<!--=========================  返回顶层按钮  ==========================-->
	<button class="scroll-top btn">
		<i class="pci-chevron chevron-up"></i>
	</button>
	<!--=========================  选择皮肤功能  ==========================-->
	<jsp:include page="../framework/page-set.jsp" />

	<div id="floating-top-right" class="floating-container"></div>
</div>
<!--===================================================-->
<!-- END OF CONTAINER -->

<jsp:include page="../framework/script.jsp" />

</body>
</html>